<template>
    <el-table :data="tableData"
              v-loading="tableLoading"
              border>
        <el-table-column
                         v-for="(item, index) in columns"
                         :width="item.width"
                         :align="item.align ? item.align : 'center'"
                         :label="item.label"
                         :prop="item.prop">

            <template v-slot="{ row }">
                <slot :name="item.prop" :row="row">
                    {{ getProp(row, item) }}
                </slot>
            </template>
        </el-table-column>
    </el-table>
</template>
<script setup>
let getProp = (row, item) => {
    let reg = /^(.+)\[(\d+)\]\.?(.*)$/
    let matched = item.prop.match(reg)
    if (matched) {
        let arr = row[matched[1]]
        let prop = arr[matched[2]]
        let prop2 = prop[matched[3]]
        return prop2
    }
    return row[item.prop]
}
let props = defineProps({
    "tableData": {
        type: Array
    },
    "columns": {
        type: Array
    },
    "tableLoading": {
        type: Boolean,
        default() {
            return false
        }
    }
})
</script>
